/*
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
 */
import * as React from "react";
import styled from "styled-components";
export interface IBallProps {}

export default function Ball(props: IBallProps) {
  React.useEffect(() => {
    var ball: any = document.getElementById("ball");
    var ballsize = ball.offsetWidth;
    var RINGS = 12;
    var velocity = 1;
    var translatev = 100;
    var rotatev = translatev * -2;

    for (var i = 0; i < RINGS; i++) {
      ball.innerHTML +=
        '<div class="ballring" style="transform: rotateY(' +
        (360 / RINGS) * i +
        'deg);"></div>';
      ball.innerHTML +=
        '<div class="ballring" style="transform: rotateX(' +
        (360 / RINGS) * i +
        'deg);"></div>';
    }

    var go = 1;
    var nice = 1;
    var well;

    var mouseX = window.innerWidth / 2,
      mouseY = window.innerHeight / 2;

    document.addEventListener("mousemove", function (e) {
      mouseX = e.pageX;
      mouseY = e.pageY;
    });

    var finX = 1,
      finY = 1;

    function update() {
      var ballpos = ball.getBoundingClientRect();
      var center = [ballpos.left + ballsize / 2, ballpos.top + ballsize / 2];

      var moveX = mouseX - center[0];
      var moveY = mouseY - center[1];

      finX += moveX;
      finY += moveY;

      ball.style.transform =
        "translateX(" +
        finX / translatev +
        "px) rotateY(" +
        finX / -rotatev +
        "deg) translateY(" +
        finY / translatev +
        "px) rotateX(" +
        finY / rotatev +
        "deg)";
      requestAnimationFrame(update);
    }
    // update();
  }, []);
  return (
    <BallCont>
      <div className="wrapper">
        <div className="pad">
          <div className="ball" id="ball">
            <div className="ballring" id="br1"></div>
            <div className="ballring" id="br2"></div>
            <div className="ballring" id="br3"></div>
            <div className="ballring" id="br4"></div>
          </div>
        </div>
      </div>
    </BallCont>
  );
}

const BallCont = styled.div`
  * {
    padding: 0;
    margin: 0;
  }

  .wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
  }

  .pad {
    width: 100%;
    height: 100vh;
    background-color: #b10dc9;
    position: relative;
    overflow: hidden;
  }

  .ball {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    position: absolute;
    animation: rotate 10s infinite;
    transform-style: preserve-3d;
    z-index: 1;
  }

  .ball:hover {
    animation-play-state: running;
  }

  .ballring {
    width: inherit;
    height: inherit;
    border-radius: inherit;
    border: 1px solid #0844bd;
    box-sizing: border-box;
    position: absolute;
    background-color: transparent;
    z-index: 1;

    /*animation: rotate 2.5s infinite running;*/
  }

  #br1 {
    transform: rotateY(0deg);
    animation-delay: 0s;
  }
  #br2 {
    transform: rotateY(45deg);
    animation-delay: 0.5s;
  }
  #br3 {
    transform: rotateY(90deg);
    animation-delay: 1s;
  }
  #br4 {
    transform: rotateY(135deg);
    animation-delay: 1.5s;
  }

  @keyframes rotate {
    0% {
      transform: rotateY(0deg) rotateX(180deg);
    }
    100% {
      transform: rotateY(360deg) rotateX(-180deg);
    }
  }

  @keyframes roll {
    from {
      left: 0;
    }
    to {
      left: 100%;
    }
  }
`;
